<template>
	<view class="settings-page">
		<!-- 顶部导航 -->
		<view class="nav-header">
			<view class="back-btn" @tap="goBack">
				<text class="back-arrow">←</text>
			</view>
			<text class="title">更多设置</text>
		</view>
		
		<!-- 设置列表 -->
		<view class="settings-list">
			<!-- 账号与安全 -->
			<view class="settings-item">
				<view class="left">
					<image class="icon" src="/static/secure.png" mode="aspectFit"></image>
					<text class="label">账号与安全</text>
				</view>
				<text class="arrow">></text>
			</view>
			
			<!-- 单词自动发音 -->
			<view class="settings-item">
				<view class="left">
					<image class="icon" src="/static/articulation.png" mode="aspectFit"></image>
					<text class="label">单词自动发音</text>
				</view>
				<switch :checked="true" color="#5CD3D3" />
			</view>
			
			<!-- 例句自动发音 -->
			<view class="settings-item">
				<view class="left">
					<image class="icon" src="/static/articulation.png" mode="aspectFit"></image>
					<text class="label">例句自动发音</text>
				</view>
				<switch :checked="true" color="#5CD3D3" />
			</view>
			
			<!-- 帮助与反馈 -->
			<view class="settings-item">
				<view class="left">
					<image class="icon" src="/static/achievement.png" mode="aspectFit"></image>
					<text class="label">帮助与反馈</text>
				</view>
				<text class="arrow">></text>
			</view>
			
			<!-- 关于我们 -->
			<view class="settings-item">
				<view class="left">
					<image class="icon" src="/static/achievement.png" mode="aspectFit"></image>
					<text class="label">关于我们</text>
				</view>
				<text class="arrow">></text>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-btn" @tap="handleLogout">
			退出登录
		</view>
	</view>
</template>

<script setup>
const goBack = () => {
	uni.navigateBack()
}

const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		}
	})
}
</script>

<style lang="scss">
.settings-page {
	min-height: 100vh;
	background-color: #E8F6F6;
	padding-bottom: env(safe-area-inset-bottom);
}

.nav-header {
	display: flex;
	align-items: center;
	padding: 60rpx 30rpx 20rpx;
	position: relative;
	
	.back-btn {
		position: absolute;
		left: 30rpx;
		
		.back-arrow {
			font-size: 40rpx;
			color: #333;
		}
	}
	
	.title {
		width: 100%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
	}
}

.settings-list {
	padding: 20rpx 30rpx;
	
	.settings-item {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.left {
			display: flex;
			align-items: center;
			gap: 12rpx;
			
			.icon {
				width: 40rpx;
				height: 40rpx;
				opacity: 0.8;
			}
			
			.label {
				font-size: 30rpx;
				color: #333;
			}
		}
		
		.arrow {
			font-size: 30rpx;
			color: #666;
		}
		
		switch {
			transform: scale(0.8);
			transform-origin: right center;
		}
	}
}

.logout-btn {
	margin: 60rpx 30rpx;
	height: 88rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	color: #FF6B6B;
}
</style>
